<template>
  <view class="serach-result-container">
    <!-- 自定义导航栏 -->
    <navigation-bar>
      <navigator
        style="position: absolute;top: 50%;transform: translateY(-50%);left: 20px;font-size: 16px;line-height: 16px;color: #000;"
        class="iconfont" hover-class="none" open-type="navigateBack">&#xe61a;</navigator>
      <view class="top-title-bar">
        搜索结果
      </view>
    </navigation-bar>
    <view class="main-content-wrapper"
      :style="{height: `calc(100% - ${statusbarHeight}px - ${bar_topHeight}px - 40rpx)`}">
      <view class="search-bar-wrap">
        <input class="input" type="text" confirm-type="search" placeholder="端午节放假通知" v-model="iptValue"
          @confirm="onSearch">
      </view>
      <view class="sub-tab-list">
        <view class="tab-item" :class="{'tab-item_active': current === index}" v-for="(item, index) in tabList"
          :key="item" @click="onTabClick(index)">
          {{item}}
        </view>
      </view>
      <view class="swiper-wrap">
        <swiper :current="current" :duration="300" class="swiper-list" @change="onSwiperChange">
          <swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="item">
            <z-paging ref="paging" v-model="searchResultList[index]" :use-cache="false" @query="onQuery(index)">
              <view class="post-item" v-for="post in searchResultList[index]" :key="post.id">
                <post-item :post="post" page="index" @focus-handler="onFocusClick"></post-item>
              </view>
            </z-paging>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <cc-toast ref="ccToast"></cc-toast>
  </view>
</template>

<script>
  import postItem from "@/components/posts-item/posts-item.vue"
  import ccToast from "@/components/cc-toast/cc-toast.vue"
  import naviHeightMix from "@/mixins/get-NavigationBar_Height.js"
  export default {
    mixins: [naviHeightMix],
    data() {
      return {
        searchHistory: ['西区八舍停电', '2023年版马克思原理课本', '南区新修的两栋楼是什么楼', '蛋仔派对交流组', '文学院美女合集'] || uni.getStorageInfoSync(
          'searchHistory'),
        searchKey: '',
        tabList: ['闲置', '求购', '求助', '帖子'],
        current: 0,
        searchResultList: [
          [{
            id: 1,
            user_avatar: "/static/user.png",
            user_name: "暗裔   亚克托斯",
            pub_time: "10分钟前",
            views_count: "1.2w",
            hot_count: "1.1w",
            post_title: "淘宝上面买的Teva的凉鞋，37码，全新，只试穿过一次，很新，现在399元出了。",
            post_cover: "/static/post-cover3.png",
            picture_list: [
              "/static/post-cover3.png",
              "/static/post-cover4.png"
            ]
          }, {
            id: 11,
            user_avatar: "/static/user.png",
            user_name: "暗裔   亚克托斯",
            pub_time: "10分钟前",
            views_count: "1.2w",
            hot_count: "1.1w",
            post_title: "淘宝上面买的Teva的凉鞋，37码，全新，只试穿过一次，很新，现在399元出了。",
            post_cover: "/static/post-cover3.png",
            picture_list: [
              "/static/post-cover3.png",
            ]
          }, {
            id: 12,
            user_avatar: "/static/user.png",
            user_name: "暗裔   亚克托斯",
            pub_time: "10分钟前",
            views_count: "1.2w",
            hot_count: "1.1w",
            post_title: "淘宝上面买的Teva的凉鞋，37码，全新，只试穿过一次，很新，现在399元出了。",
            post_cover: "/static/post-cover3.png",
            picture_list: [
              "/static/post-cover3.png"
            ]
          }],
          [],
          [],
          []
        ],
        demoData: [], // 演示数据
        iptValue: ''
      };
    },
    onLoad(options) {
      this.searchKey = options.searchKey
      this.demoData = this.searchResultList

      this.$refs.paging[0].reload()
    },
    methods: {
      // Tab 点击
      onTabClick: function(index) {
        if (this.current === index) {
          this.$refs.paging[index].reload()
        } else if (this.searchResultList[index].length === 0) {
          this.$refs.paging[index].reload()
        }

        this.current = index
      },
      // Swiper 切换
      onSwiperChange: function(e) {
        if (e.detail.source === '') return

        const index = e.detail.current
        if (this.current === index) {
          this.$refs.paging[index].reload()
        } else if (this.searchResultList[index].length === 0) {
          this.$refs.paging[index].reload()
        }

        this.current = index
      },
      // 点击关注
      onFocusClick: function(e) {
        if (e) {
          this.$refs.ccToast.show({
            toastText: "关注成功"
          })
        } else {
          this.$refs.ccToast.show({
            toastText: "取消关注"
          })
        }
      },

      // 触发搜索
      onSearch: function() {
        const key = this.iptValue
        let historyList = this.searchHistory.filter(x => x !== key)
        historyList.unshift(key)
        if (historyList.length > 20) historyList.splice(20)
        this.searchHistory = historyList
        uni.setStorageSync('searchHistory', this.searchHistory)

        this.iptValue = ''

        this.$refs.paging[0].reload()
      },

      // 开始请求
      onQuery: function(index) {
        this.$refs.paging[index].complete(this.demoData[index])
      }
    },
    components: {
      postItem,
      ccToast
    }
  }
</script>

<style lang="scss">
  .serach-result-container {
    height: 100%;

    .top-title-bar {
      position: absolute;
      left: 60px;
    }

    .main-content-wrapper {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;

      &>view {
        width: 86.98%;
      }

      .search-bar-wrap {
        margin-top: 20rpx;
        height: 60rpx;
        border-radius: 40rpx;
        background-color: #F3F3F3;
        box-sizing: border-box;
        padding: 0 20rpx;
        display: flex;
        align-items: center;
        font-size: 32rpx;

        .input {
          flex: 1;
        }
      }

      .sub-tab-list {
        display: flex;

        .tab-item {
          flex: 1;
          padding: 40rpx 0;
          font-size: 28rpx;
          text-align: center;
        }

        .tab-item_active {
          color: #0191FF;
        }
      }

      .swiper-wrap {
        width: 100% !important;
        height: calc(100% - 202rpx);

        .swiper-list {
          width: 100%;
          height: 100%;

          .swiper-item {
            box-sizing: border-box;
            padding: 0 6.51%;

            .post-item {
              margin-top: 20rpx;
            }
          }
        }
      }
    }
  }
</style>